<template>
  <div style="margin-left: 20px;">
    <h2>配置中心
      <small>
        <div style="display: inline-block;vertical-align: middle; position: relative; top: -2px; margin-left: 8px">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <span class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                    aria-expanded="false">{{currentEnv.name}}<span class="caret"></span></span>
              <ul class="dropdown-menu">
                <li><a class="link" :href="env.daily.url">切换日常</a></li>
                <li><a class="link" :href="env.prepub.url">切换预发</a></li>
                <li><a class="link" :href="env.product.url">切换线上</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div style="display: inline-block;vertical-align: middle; position: relative; top: -2px; margin-left: 20px">
          <ul class="nav navbar-nav" v-if="treeJson">
            <li class="dropdown">
              <span class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                    aria-expanded="false">配置空间<span class="caret"></span></span>
              <ul class="dropdown-menu">
                <template v-if="treeJson.childNodes.length > 0">
                  <li v-for="item in treeJson.childNodes"><a href="#"
                                                             @click="chosenSpace(item)">{{item.description}}</a>
                  </li>
                </template>
                <li v-else><a>暂无数据</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div style="display: inline-block;vertical-align: middle; position: relative; top: 1px; margin-left: 30px">
          <el-tooltip :content="show+'菜单'" placement="right" effect="light">
            <el-switch
              v-model="value"
              on-color="#13ce66"
              off-color="#ff4949"
              @change="togMenu"
              on-value="展开"
              off-value="隐藏">
            </el-switch>
          </el-tooltip>
        </div>
      </small>
    </h2>
    <div style="position:relative;">
      <el-button :plain="true" type="info" @click="editCont" style="position: absolute; right: 20px; top: -46px;">申请配置接入<i
        class="el-icon-arrow-right el-icon--right"></i></el-button>
    </div>
  </div>
</template>
<style>
</style>
<script>
  import {mapState, mapMutations} from 'vuex';
  import fetch from "../../store/uacc_api";
  export default {
    data: function () {
      return {
        value: '展开'
      }
    },
    computed: mapState(['show', 'context', 'treeJson', 'menuJson', 'currentEnv', 'env']),
    methods: {
      ...mapMutations(['edit', 'editContext', 'editMenu', 'editCurrentEnv']),
      togMenu(){
        this.edit(this.value)
      },
      editCont(){
        this.editContext(!this.context);
      },
      chosenSpace(val){
        let obj = JSON.parse('[' + JSON.stringify(val) + ']');
        this.editMenu(obj);
        this.setCookie('SPACEID',val.id,15);
      },
      setCookie(c_name, value, expiredays){
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + expiredays);
        document.cookie = c_name + "=" + escape(value) +
          ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
      }
    }
  }
</script>
